<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div style="width: 100px; height: 100px; background: #000;"></div>
</body>
</html>
<script>
//21-05-04 修订  
//1    
    // 兼容性好  一个元素的同一个事件只可以绑定一次
    // 基本= 在HTML行间上面  

    obj.addEventListener("type",fn,false)  
    // addEventListener方法具有第三个可选参数useCapture，其默认值为false，事件将在冒泡阶段中发生，如果为true，则事件将在捕获阶段中发生
    // ie9以下不兼容 可以绑定多个  不加o 

    obj.attachEvent("ontype",fn);
    // ie 独有 一个可以绑定多个    加on
    
    var  div = document.getElementsByTagName("div")[0];
    //句柄
    div.addEventListener('click',function(){console.log(ok)},false)
    div.addEventListener('click',text,false)
                       //function text(){console.log(ok)}
    //事件兼容写法 
    


    //2
    //dom3 规定click 只能监听左键  右键则是 onmouseXXX
    document.onmousedown = function (e){
        console.log(e)
    //e事件源下面有一个button 属性
    //鼠标L为 0  鼠标中 1  鼠标R 2   
    }


    //阻止事件默认行为 
      //方式1   event.preventDefault()
      //方式2   return false
        // e.stopPropagation 
        // e.cancelBubble = true
    //event.preventDefault() 和 return false区别？ 
      //如果返回false则有可能 正在执行其他操作 这个函数是专门在click里面的 而event.preventDefault()则不准许有任何的操作  

//_____________________________________________________________________________
     //原生js给一个按钮绑定两个onclick事件
        // var btn = document.getElementById("btn")
     // 事件监听 绑定多个事件
        // btn.addEventListener("click",hello1);
        // btn.addEventListener("click",hello2);
        // function hello1(){alert(hi 1 )}
        // function hello2(){alert(hi 2 )}

//______________________________________________________________________________
  //一个事件的处理过程主要3个阶段，捕获，目标，冒泡
  //捕获
    //在dom树某个节点发生一些操作(点击，鼠标移上去)就会有一个事件发射出去
  //目标
    //当事件不断的传递直到目标节点时 最终在目标节点上触发这个事件，
  //冒泡
    //即事件开始时，由具体的元素接收(也就是事件发生所在的节点)  


    // 什么是事件传播?
      // 捕获阶段–  事件从 window 开始，然后向下到每个元素，直到到达目标元素事件或event.target。
      // 目标阶段–  事件已达到目标元素。
      // 冒泡阶段–  事件从目标元素冒泡，然后上升到每个元素，直到到达 window。


    // 什么是事件捕获？
      // 当事件发生在 DOM 元素上时，该事件并不完全发生在那个元素上。
      // 在捕获阶段，事件从window开始，一直到触发事件的元素。window----> document----> html----> body \---->目标元素



</script>